import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class RegisterPage extends StatelessWidget {
  RegisterPage({Key? key}) : super(key: key);

  final RegisterLogic logic = Get.put(RegisterLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('注册'),
        backgroundColor: Colors.green,
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 24.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 40.h),
                _buildHeader(),
                SizedBox(height: 40.h),
                _buildRegisterForm(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '创建账号',
          style: TextStyle(
            fontSize: 28.sp,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          '请填写以下信息完成注册',
          style: TextStyle(
            fontSize: 16.sp,
            color: Colors.grey[600],
          ),
        ),
      ],
    );
  }

  Widget _buildRegisterForm() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Username field
        TextField(
          controller: logic.usernameController,
          decoration: InputDecoration(
            labelText: '用户名',
            prefixIcon: Icon(Icons.person),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
        ),
        SizedBox(height: 16.h),
        // Password field
        TextField(
          controller: logic.passwordController,
          obscureText: true,
          decoration: InputDecoration(
            labelText: '密码',
            prefixIcon: Icon(Icons.lock),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
        ),
        SizedBox(height: 16.h),
        // Confirm password field
        TextField(
          controller: logic.confirmPasswordController,
          obscureText: true,
          decoration: InputDecoration(
            labelText: '确认密码',
            prefixIcon: Icon(Icons.lock_outline),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
        ),
        SizedBox(height: 16.h),
        // Age field
        TextField(
          controller: logic.ageController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            labelText: '年龄',
            prefixIcon: Icon(Icons.cake),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
        ),
        SizedBox(height: 16.h),
        // Gender field
        DropdownButtonFormField<String>(
          value: logic.selectedGender.value.isEmpty ? null : logic.selectedGender.value,
          onChanged: (value) => logic.selectedGender.value = value!,
          decoration: InputDecoration(
            labelText: '性别',
            prefixIcon: Icon(Icons.person_outline),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
          items: [
            DropdownMenuItem(value: '男', child: Text('男')),
            DropdownMenuItem(value: '女', child: Text('女')),
          ],
        ),
        SizedBox(height: 24.h),
        // Register button
        Obx(() => SizedBox(
          width: double.infinity,
          height: 50.h,
          child: ElevatedButton(
            onPressed: logic.isLoading.value ? null : logic.register,
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.r),
              ),
            ),
            child: logic.isLoading.value
                ? CircularProgressIndicator(color: Colors.white)
                : Text(
                    '注册',
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.white,
                    ),
                  ),
          ),
        )),
        SizedBox(height: 16.h),
        // Back to login button
        Center(
          child: TextButton(
            onPressed: logic.goBack,
            child: Text(
              '已有账号？返回登录',
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.green,
              ),
            ),
          ),
        ),
      ],
    );
  }
}
